/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div :class="['content', onePageVis ? 'hide' : 'show']">
    <ul class="main">
      <li class="col">
        <div class="cell">
          <Users :family="family"></Users>
        </div>
        <div class="cell">
          <HouseType :house="house"></HouseType>
        </div>
        <div class="cell">
          <Money :money="money"></Money>
        </div>
      </li>
      <li class="col">
        <div class="cell">
          <YearPlan title="全年进度状况(户)" :chartData="schedule" :selecte="false"></YearPlan>
        </div>
        <div class="cell">
          <Compensation :compenstation="compenstation"></Compensation>
        </div>
        <div class="cell">
          <NaowuRank :laowuRank="laowuRank"></NaowuRank>
        </div>
      </li>
      <li class="col">
        <div class="cell">
          <Areas :area="area"></Areas>
        </div>
        <div class="cell">
          <ThirdCom :thirdCom="thirdCom"></ThirdCom>
        </div>
        <div class="cell">
          <PayMonth :monthPay="monthPay"></PayMonth>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getRandom } from "../../utils/index.js";
import Users from "../../components/chartComponent/Users"; //征收户数统计
import Areas from "../../components/chartComponent/Areas"; //征收面积统计
import HouseType from "../../components/chartComponent/HouseType"; //征收房屋类型统计
import Money from "../../components/chartComponent/Money"; //资金统计
import YearPlan from "../../components/chartComponent/YearPlan"; //全年进度
import Compensation from "../../components/chartComponent/Compensation"; //补偿方式
import NaowuRank from "../../components/chartComponent/NaowuRank"; //劳务排名
import ThirdCom from "../../components/chartComponent/thirdCom"; //第三方机构
import PayMonth from "../../components/chartComponent/payMonth"; //每月支付进度

import {
  reqScreenFamily,
  reqScreenHouse,
  reqScreenMoney,
  reqScreenSchedule,
  reqScreenCompensation,
  reqScreenLaowuRank,
  reqScreenArea,
  reqScreenThirdCom,
  reqScreenMonthPay
} from "../../api/index.js";

export default {
  props: {
    onePageVis: Boolean,
    pageTypes: Object,
  },
  data() {
    return {
      family: {}, //户数信息
      house: {}, // 房屋类型
      money: {}, // 资金状况
      schedule: {}, // 项目进度
      compenstation: {}, // 补偿方式
      laowuRank: [], // 劳务排名
      area: {}, // 面积信息
      thirdCom: {}, // 第三方机构信息
      monthPay: {} // 每月支出情况
    };
  },
  watch:{
    pageTypes: function(data){
    }
  },
  methods: {
    async reqData(name, getAjax, params) {
      // let params = this.pageTypes;
      console.log('params', params)
      let data = await getAjax(params);
      if (data.code === 1) {
        this[name] = data.data;
      } else {
        console.log(name + ":数据获取失败!");
      }
    },
    async reqAllData(data) {
      console.log('data', data)
      this.reqData("family", reqScreenFamily, data); // 户数信息
      this.reqData("house", reqScreenHouse, data); // 房屋类型
      this.reqData("money", reqScreenMoney, data); // 资金状况
      this.reqData("schedule", reqScreenSchedule, data); // 项目进度
      this.reqData("compenstation", reqScreenCompensation, data); // 补偿方式
      this.reqData("laowuRank", reqScreenLaowuRank, data); // 劳务排名
      this.reqData("area", reqScreenArea, data); // 面积信息
      this.reqData("thirdCom", reqScreenThirdCom, data); // 第三方机构信息
      this.reqData("monthPay", reqScreenMonthPay, data); // 每月支出情况
    }
  },
  mounted() {
    console.log('初始化值', this.pageTypes)
    setTimeout(()=>{
      this.reqAllData(this.pageTypes); //获取全部pageTwo的数据
    },1000)
  },
  components: {
    Users,
    Areas,
    HouseType,
    Money,
    YearPlan,
    Compensation,
    NaowuRank,
    ThirdCom,
    PayMonth
  }
};
</script>

<style lang='less' scoped>
.content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
  padding: 20vh 10vw 5vw;
  box-sizing: border-box;
  transition: transform ease-out 0.6s;
  .main {
    width: 100%;
    height: 100%;
    background-color: rgba(33, 33, 33, 0.8);
    .col {
      display: inline-block;
      width: 33.3333%;
      height: 100%;
      box-sizing: border-box;
      float: left;
      .cell {
        width: 100%;
        height: 33.333%;
        box-sizing: border-box;
        padding: 0.5vw;
        position: relative;
      }
    }
  }
}

.hide {
  transform: translate3d(100%, 0, 0px);
}

.show {
  transform: translate3d(0px, 0px, 0px);
}
</style>
